<template>
	<view class="points-mall-container">
        <view class="tabs-view">
            <u-tabs :list="categories" :name="'cat_name'" :current="current" active-color="#ff5000" @change="handleClickCate"></u-tabs>
            <u-line></u-line>
        </view>
        <view class="goods-container">
            <mescroll-body ref="mescrollRef" top="80" @init="mescrollInit" :down="down" @down="downCallback" @up="upCallback">
                <view v-for="(goods, index) in pointsList" :key="index" v-if="goods.enable_exchange" class="goods-item u-flex">
                    <navigator hover-class="none" class="goods-img" :url="'/goods-module/goods?goods_id=' + goods.goods_id">
                        <image class="img" :src="goods.goods_img"></image>
                    </navigator>
                    <view class="u-flex-1">
                        <view class="u-line-2 u-m-b-30">
                            {{ goods.goods_name }}
                        </view>
                        <view class="u-flex">
                            <view class="u-flex-1 exchange-price">
                                {{ goods.exchange_point }}积分 + {{ goods.exchange_money | unitPrice('￥') }}
                            </view>
                            <navigator hover-class="none" :url="'/goods-module/goods?goods_id=' + goods.goods_id">
                                <text class="to-points-mall-btn">兑换</text>
                            </navigator>
                        </view>
                        <view class="original-price u-m-t-20">
                            <view class="">
                                原价：{{ goods.goods_price | unitPrice('￥') }}
                            </view>
                        </view>
                    </view>
                </view>
            </mescroll-body>
        </view>
        <loading-view v-if="loading"></loading-view>
    </view>
</template>

<script>
    import * as API_Promotions from '@/api/promotions.js'
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
        mixins: [MescrollMixin],
		data() {
			return {
                params: {
                  page_no: 1,
                  page_size: 10,
                  cat_id: 0
                },
                categories: [], //团购分类
                current: 0,
                pointsList: [], //积分商品
                down: {
                    auto: false //是否在初始化完毕之后自动执行一次下拉刷新的回调
                },
                loading: true
			};
		},
        onLoad() {
            this.getPointsCategory()
        },
        methods: {
            //选择积分分类
            handleClickCate(index) {
                this.current = index
                this.pointsList = []
                this.params.page_no = 1
                const cate = this.categories[index]
                this.params.cat_id = cate.cat_id || 0
                this.mescroll.resetUpScroll(true)
            },
            //上拉加载数据
            upCallback(page){
                this.params.page_no = page.num;
                this.getPointsGoods();
            },
            //下拉刷新
            downCallback(){
                this.handleClickCate(this.current);
            },
            //获取积分分类
            getPointsCategory() {
                API_Promotions.getPointsCategory().then(response => {
                    let categories = response.map(item => {
                        return {
                              active: false,
                              name: item.name,
                              cat_id: item.category_id
                        }
                    })
                    categories.unshift({ cat_id: 0, name: '全部', active: true })
                    this.categories = categories
                })
            },
            //获取积分商品
            getPointsGoods() {
                const params = JSON.parse(JSON.stringify(this.params))
                if (params.cat_id === 0) delete params.cat_id
                API_Promotions.getPointsGoods(params).then(response => {
                    const { data } = response
                    this.pointsList.push(...data)
                    this.loading = false
                    this.mescroll.endBySize(data.length, response.data_total)
                })
            }
        }
	}
</script>

<style lang="scss" scoped>
    .points-mall-container {
        .goods-container {
            background-color: #FFFFFF;
            /deep/.u-empty {
                margin-top: 120rpx !important;
            }
            .goods-list {
                height: calc(100vh - 80rpx);
            }
            .goods-item {
                padding: 20rpx;
                border-bottom: 2rpx solid #E4E7Ed;
                .goods-img {
                    width: 200rpx;
                    height: 200rpx;
                    margin-right: 20rpx;
                    border-radius: 10rpx;
                    overflow: hidden;
                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .exchange-price {
                    color: #ff5000;
                }
                .original-price {
                    color: #666;
                    font-size: 24rpx;
                }
                .to-points-mall-btn {
                    color: #FFFFFF;
                    padding: 8rpx 20rpx;
                    border-radius: 8rpx;
                    background-color: #ff5000;
                }
            }
        }
    }
</style>
